<%--
  Created by IntelliJ IDEA.
  User: 陈滨进
  Date: 2021/3/19
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>single</title>
    <%@include file="common/utils.jsp"%>
</head>
<body>

<%--头--%>
<%@include file="common/head.jsp" %>
<%--左边菜单--%>
<%@include file="common/leftMenu.jsp" %>
<%--右边中间内容--%>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="show-top-grids">
        <div class="col-sm-8 single-left">
            <div class="song">
                <div class="song-info">
                    <h3>${viedo.vname}</h3>
                </div>
                <div class="video-grid">
                    <%--允许全屏--%>
                    <%--<iframe src="https://www.youtube.com/embed/oYiT-vLjhC4" allowfullscreen></iframe>--%>
                        <iframe src="${viedo.path}" allowfullscreen></iframe>


                </div>
            </div>
            <div class="song-grid-right">
                <div class="share">
                    <h5>Share this</h5>
                    <ul>
                        <li><a href="/FavoriteServlet.do?action=favoriteAdd&id=${viedo.id}" class="icon fb-icon">收藏</a></li>
                        <%--<li><a href="#" class="icon dribbble-icon">Dribbble</a></li>--%>
                        <%--<li><a href="#" class="icon twitter-icon">Twitter</a></li>--%>
                        <%--<li><a href="#" class="icon pinterest-icon">Pinterest</a></li>--%>
                        <%--<li><a href="#" class="icon whatsapp-icon">Whatsapp</a></li>--%>
                        <%--<li><a href="#" class="icon like">Like</a></li>--%>
                        <%--<li><a href="#" class="icon comment-icon">Comments</a></li>--%>
                        <li class="view">200 Views</li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="published">
                <script src="jquery.min.js"></script>
                <script>
                    $(document).ready(function () {
                        size_li = $("#myList li").size();
                        x = 1;
                        $('#myList li:lt(' + x + ')').show();
                        $('#loadMore').click(function () {
                            x = (x + 1 <= size_li) ? x + 1 : size_li;
                            $('#myList li:lt(' + x + ')').show();
                        });
                        $('#showLess').click(function () {
                            x = (x - 1 < 0) ? 1 : x - 1;
                            $('#myList li').not(':lt(' + x + ')').hide();
                        });

                        var id = location.search.substr(1);
                        var true_id = id.split("&")



                    });
                </script>
                <div class="load_more">
                    <ul id="myList">
                        <li>
                            <h4>简介</h4>
                            <p>${viedo.vdesc}</p>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="all-comments">
                <div class="all-comments-info">
                    <a href="#">All Comments (8,657)</a>
                    <div class="box">
                        <form>
                            <input type="text" placeholder="Name" required=" ">
                            <input type="text" placeholder="Email" required=" ">
                            <input type="text" placeholder="Phone" required=" ">
                            <textarea placeholder="Message" required=" "></textarea>
                            <input type="submit" value="SEND">
                            <div class="clearfix"></div>
                        </form>
                    </div>
                    <div class="all-comments-buttons">
                        <ul>
                            <li><a href="#" class="top">Top Comments</a></li>
                            <li><a href="#" class="top newest">Newest First</a></li>
                            <li><a href="#" class="top my-comment">My Comments</a></li>
                        </ul>
                    </div>
                </div>
                <div class="media-grids">
                    <div class="media">
                        <h5>Tom Brown</h5>
                        <div class="media-left">
                            <a href="#">

                            </a>
                        </div>
                        <div class="media-body">
                            <p>Maecenas ultricies rhoncus tincidunt maecenas imperdiet ipsum id ex pretium hendrerit
                                maecenas imperdiet ipsum id ex pretium hendrerit</p>
                            <span>View all posts by :<a href="#"> Admin </a></span>
                        </div>
                    </div>
                    <div class="media">
                        <h5>Mark Johnson</h5>
                        <div class="media-left">
                            <a href="#">

                            </a>
                        </div>
                        <div class="media-body">
                            <p>Maecenas ultricies rhoncus tincidunt maecenas imperdiet ipsum id ex pretium hendrerit
                                maecenas imperdiet ipsum id ex pretium hendrerit</p>
                            <span>View all posts by :<a href="#"> Admin </a></span>
                        </div>
                    </div>
                    <div class="media">
                        <h5>Steven Smith</h5>
                        <div class="media-left">
                            <a href="#">

                            </a>
                        </div>
                        <div class="media-body">
                            <p>Maecenas ultricies rhoncus tincidunt maecenas imperdiet ipsum id ex pretium hendrerit
                                maecenas imperdiet ipsum id ex pretium hendrerit</p>
                            <span>View all posts by :<a href="#"> Admin </a></span>
                        </div>
                    </div>
                    <div class="media">
                        <h5>Marry Johne</h5>
                        <div class="media-left">
                            <a href="#">

                            </a>
                        </div>
                        <div class="media-body">
                            <p>Maecenas ultricies rhoncus tincidunt maecenas imperdiet ipsum id ex pretium hendrerit
                                maecenas imperdiet ipsum id ex pretium hendrerit</p>
                            <span>View all posts by :<a href="#"> Admin </a></span>
                        </div>
                    </div>
                    <div class="media">
                        <h5>Mark Johnson</h5>
                        <div class="media-left">
                            <a href="#">

                            </a>
                        </div>
                        <div class="media-body">
                            <p>Maecenas ultricies rhoncus tincidunt maecenas imperdiet ipsum id ex pretium hendrerit
                                maecenas imperdiet ipsum id ex pretium hendrerit</p>
                            <span>View all posts by :<a href="#"> Admin </a></span>
                        </div>
                    </div>
                    <div class="media">
                        <h5>Mark Johnson</h5>
                        <div class="media-left">
                            <a href="#">

                            </a>
                        </div>
                        <div class="media-body">
                            <p>Maecenas ultricies rhoncus tincidunt maecenas imperdiet ipsum id ex pretium hendrerit
                                maecenas imperdiet ipsum id ex pretium hendrerit</p>
                            <span>View all posts by :<a href="#"> Admin </a></span>
                        </div>
                    </div>
                    <div class="media">
                        <h5>Peter Johnson</h5>
                        <div class="media-left">
                            <a href="#">

                            </a>
                        </div>
                        <div class="media-body">
                            <p>Maecenas ultricies rhoncus tincidunt maecenas imperdiet ipsum id ex pretium hendrerit
                                maecenas imperdiet ipsum id ex pretium hendrerit</p>
                            <span>View all posts by :<a href="#"> Admin </a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 single-right">
            <h3>Up Next</h3>
            <div class="single-grid-right">
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r1.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r2.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r3.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r4.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r5.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r6.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author">By <a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r1.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r2.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r3.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r4.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r5.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="single-right-grids">
                    <div class="col-md-4 single-right-grid-left">
                        <a href="single.jsp"><img src="images/r6.jpg" alt=""/></a>
                    </div>
                    <div class="col-md-8 single-right-grid-right">
                        <a href="single.jsp" class="title"> Nullam interdum metus</a>
                        <p class="author"><a href="#" class="author">John Maniya</a></p>
                        <p class="views">2,114,200 views</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- footer -->
    <%@include file="common/foot.jsp" %>
    <!-- //footer -->
</div>
<div class="clearfix"></div>
<div class="drop-menu">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
    </ul>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
</body>
</html>